<template>
  <!-- 年度参数配置 -->
  <div class="contentArea">
    <div class="headerArea">
      <a-button type="primary" @click="handleImport" class="yellowBtn"
        >导入</a-button
      >
    </div>
    <div class="tableContent">
      <a-table
        :dataSource="tableData"
        :columns="columns"
        size="small"
        :scroll="{ x: 'max-content' }"
        @resizeColumn="handleResizeColumn"
        :pagination="false"
        :loading="tableLoading"
        bordered
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'index'">
            {{ index + 1 }}
          </template>
          <template v-if="column.key === 'fixedPriceRatio'">
            {{ record?.fixedPriceRatio * 100 }}%
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="filterForm.current"
        v-model:page-size="filterForm.size"
        :total="total"
        position="bottomRight"
        show-size-changer
        @change="getConfigList"
        :show-total="(total) => `总共 ${total} 条`"
      >
        <template #buildOptionText="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>
  </div>
  <!-- 导入弹窗 -->
  <ImportModal
    v-model:importModalVisible="importModalVisible"
    :modelUrl="modelUrl"
    importApi="sellStorageYeaImport"
    @getConfigList="getConfigList"
  />
</template>

<script setup>


import ImportModal from "./ImportModal.vue";
const $api = inject("$api");
const tableData = ref([
  {
    id: 1,
  },
]);
const tableLoading = ref(false);
const total = ref(0);

const filterForm = ref({
  current: 1,
  size: 10,
});
const modelUrl =
  "https://ngp-cloud.oss-cn-shenzhen.aliyuncs.com/public/monitor/%E5%B9%B4%E5%BA%A6%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
const columns = ref([
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 80,
    align: "center",
  },
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 200,
    align: "center",
  },
  {
    title: "生效年份",
    dataIndex: "year",
    key: "year",
    width: 120,
    align: "center",
  },
  {
    title: "售电签约固定价格（厘）",
    dataIndex: "fixedPrice",
    key: "fixedPrice",
    width: 200,
    align: "center",
  },
  {
    title: "固定价格占比",
    dataIndex: "fixedPriceRatio",
    key: "fixedPriceRatio",
    width: 150,
    align: "center",
  },
  {
    title: "浮动价",
    dataIndex: "floatingPrice",
    key: "floatingPrice",
    width: 120,
    align: "center",
  },
  {
    title: "峰系数",
    dataIndex: "peakCoefficient",
    key: "peakCoefficient",
    width: 120,
    align: "center",
  },
  {
    title: "谷系数",
    dataIndex: "valleyCoefficient",
    key: "valleyCoefficient",
    width: 120,
    align: "center",
  },
  {
    title: "峰谷平衡参考价",
    dataIndex: "peakValleyBalanceReference",
    key: "peakValleyBalanceReference",
    width: 150,
    align: "center",
  },
  {
    title: "配置人",
    dataIndex: "configUserName",
    key: "configUserName",
    width: 120,
    align: "center",
  },
  {
    title: "配置时间",
    dataIndex: "configTime",
    key: "configTime",
    width: 180,
    align: "center",
  },
]);

function handleResizeColumn(w, col) {
  col.width = w;
}

const getConfigList = async () => {
  tableLoading.value = true;
  const res = await $api.sellStorageYearList(filterForm.value);
  tableLoading.value = false;
  if (res?.code === 0) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
};
const importModalVisible = ref(false);
// 导入按钮点击事件
const handleImport = () => {
  importModalVisible.value = true;
};

onMounted(() => {
  getConfigList();
});
</script>
<style lang="less" scoped>
.contentArea {
  margin-top: 5px;
  width: calc(100% - 200px);
  display: inline-block;
  vertical-align: top;
}
.tableContent {
  margin-top: 15px;
  flex: 1;
  background-color: #141414;
  border-radius: 4px;
  padding: 8px;
}
</style>